import columnsData, { ColumnsItem } from './data'
import React, { useRef } from 'react';
import { Modal, Descriptions } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getTradingPasswordResetList } from './service'
import TableTitle from '@/components/TableTitle';

export default () => {
  // 表头赋值
  const columns: ProColumns<ColumnsItem>[] = columnsData
  // 定义金额单元格
  const withdrawAmount = (text, record, _, action) => [
    <p key='withdrawAmount' style={{ textAlign: 'right', margin: 0 }}>{record.withdrawAmount}</p>
  ]
  const handlingCharge = (text, record, _, action) => [
    <p key='handlingCharge' style={{ textAlign: 'right', margin: 0 }}>{record.handlingCharge}</p>
  ]
  const amountReceived = (text, record, _, action) => [
    <p key='amountReceived' style={{ textAlign: 'right', margin: 0 }}>{record.amountReceived}</p>
  ]
  // 定义结果单元格
  const resultRender = (text, record, _, action) => [
    <div key={record.result}>
      {
        record.result === 'Processing' ?
          <p style={{ textAlign: 'center', margin: 0 }}>交易中</p> :
          record.result === 'Success' ?
            <p style={{ textAlign: 'center', margin: 0, color: '#52c41a' }}>成功</p> :
            record.result === 'Failure' ?
              <p style={{ textAlign: 'center', margin: 0, color: '#ff4d4f' }}>失败</p> :
              null
      }
    </div>
  ]
  // 列渲染样式赋值
  columns.forEach(item => {
    item.dataIndex === 'result' ? item.render = resultRender : undefined
    item.dataIndex === 'withdrawAmount' ? item.render = withdrawAmount : undefined
    item.dataIndex === 'handlingCharge' ? item.render = handlingCharge : undefined
    item.dataIndex === 'amountReceived' ? item.render = amountReceived : undefined
  })
  // Table action 的引用，便于自定义触发
  const actionRef = useRef<ActionType>();

  return (
    <div>
      {/* 表格 */}
      <ProTable<ColumnsItem>
        bordered
        headerTitle={<TableTitle title='交易密码重置记录' />}
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}) => {
          return getTradingPasswordResetList(params);
        }}
        // 本地储存表格列的显示参数
        columnsState={{
          persistenceKey: 'TradingPasswordResetList',
          persistenceType: 'localStorage',
        }}
        // 每行表格的key
        rowKey="serialNumber"
        // 搜索表单布局配置
        search={{
          labelWidth: 'auto',
        }}
        // 搜索表单配置
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        // 分页相关配置
        pagination={{
          // 初始页面数据条数
          pageSize: 10,
        }}
        dateFormatter="string"
      />
    </div>
  );
};